<template>
  <ga-modal
    v-model:visible="visible"
    title-align="start"
    :width="600"
    @close="handleCancel(formRef)"
    modal-class="modal_style"
  >
    <template #title>标签管理</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ga-form ref="formRef" :model="formData">
        <!-- <ga-form-item label="集群标签" label-col-flex="70px" field="tags">
          <template #extra> 支持用户可以选择基础标签，也可以自定义创建标签 </template>
          <ga-select
            allow-create
            allow-clear
            multiple
            v-model="formData.tags"
            placeholder="请选择集群标签,支持创建"
          >
            <ga-option
              v-for="item in tagList"
              :value="item.dictValue"
              :key="item.dictValue"
            >
              {{ item.dictType }}
            </ga-option>
          </ga-select>
        </ga-form-item> -->
        <ga-form-item v-for="(item, index) in formData.tags" :key="index" hide-label>
          <span style="margin-right: 8px">键</span>
          <ga-input v-model="item.dictType" placeholder="输入key" style="width: 41%" />
          <span style="margin: 0 0 0 4px">值</span>
          <ga-input
            v-model="item.dictValue"
            allow-clear
            style="width: 41%; margin: 0 8px"
            placeholder="请输入value值"
          />
          <ga-link status="danger" @click="formData.tags.splice(index, 1)">删除</ga-link>
        </ga-form-item>
        <ga-form-item hide-label style="margin-bottom: 0">
          <ga-link :style="{ marginLeft: '10px' }" @click="formData.tags.push({})">
            <icon-plus />添加
          </ga-link>
        </ga-form-item>
      </ga-form>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk">确定</ga-button>
    </template>
  </ga-modal>
</template>

<script setup>
import { ref, defineEmits, reactive } from "vue";
import { updataTagList, getTagList } from "@/api/cluserMgmt";
import { Message } from "@garco-design/web-vue";
import useLoading from "@/hooks/loading";

const { loading, setLoading } = useLoading(false);
const formRef = ref(null);
const formData = reactive({
  tags: [],
});
const visible = ref(false);
const curId = ref("");
const open = async (val) => {
  visible.value = true;
  setLoading(true);
  const { data } = await getTagList(val?.id);
  formData.tags = data;
  curId.value = val?.id;
  setLoading(false);
};
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  const res = await formRef.value?.validate();
  if (!res) {
    try {
      // console.log("formData.tags", formData.tags);

      // const arr = formData.tags?.map((item) => {
      //   return {
      //     [item.dictValue]:item.dictType
      //   };
      // });
      const { code } = await updataTagList(curId.value, formData.tags);
      if (code === 20000) Message.success("操作成功");
      emits("fetchData");
    } finally {
      visible.value = false;
    }
  }
};
const handleCancel = (formEl) => {
  curId.value = "";
  formEl.resetFields();
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
.ratio_label {
  border-left: 4px solid #0f5ef7;
  padding-left: 8px;
}
</style>
